import React, {useEffect, useRef, useState} from 'react';
import * as echarts from 'echarts';
import {reqGetEchartsCourseOrderList} from "../../../../api/backStage/echarts";


const CourseOrderChart = () => {
    const chartRef = useRef(null);
    const [echartsArr, setEchartsArr] = useState([])
    let option = {
        tooltip: {
            trigger: 'item'
        },
        xAxis: {
            type: 'category',
            data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: echartsArr,
                type: 'bar'
            }
        ]
    }


    //获取课程订单列表
    useEffect(() => {
        const getData = async () => {
            const result = await reqGetEchartsCourseOrderList();
            const newData = result.data.map((item) => ({value: item.length}));
            setEchartsArr(newData);
        };
        getData()
    }, [])


    useEffect(() => {
        if (chartRef.current && echartsArr.length > 0) {
            const myChart = echarts.init(chartRef.current);
            myChart.setOption(option);
        }
    }, [option,echartsArr]);

    return (
        <div>
            <h1>课程订单</h1>
            <div>
                <div ref={chartRef} style={{width: 800, height: 500}}></div>
            </div>
        </div>
    );
};

export default CourseOrderChart;